<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<link rel="stylesheet" type="text/css" href="icon/iconfont.css" />
	<link rel="stylesheet" href="swiper/css/swiper.min.css">
	<script src="swiper/js/swiper.min.js"></script>
	<script src="data/data.js"></script>
	<script src="js/template.js"></script>

</head>

<body>
	<!--顶部栏	start-->
	<div class="header">
		<div class="content">
			<div class="content-left ">
				<div>欢迎光临太阁图书网</div>
				<div>
					<a href="#">请登录</a>
				</div>
				<div>
					<a href="#">免费注册</a>
				</div>
			</div>
			<ol class="content-right ">
				<li>
					<a href="#">购物车</a>
				</li>
				<li>
					<a href="#">我的订单</a>
				</li>
				<li>
					<div class="account">
						<a href="#">个人账户<span class="iconfont icon-jiantou32 "></span></a>
						<div class="list">
							<ul>
								<li>
									<a href="#">个人信息</a>
								</li>
								<li>
									<a href="#">收货地址</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
			</ol>
		</div>
	</div>
	<!--顶部栏	end-->
	<!--搜索框	start-->
	<div class="search">
		<div class="content">
			<div class="logo">
				<a href="index.html"><img src="imgs/other/logo.png" /></a>
			</div>
			<div>
				<div class="search-box">
					<input type="text" />
					<button>搜索</button>
				</div>
				<ul class="hotwords">
					<li>
						<a href="#">史蒂芬·霍金 / </a>
					</li>
					<li>
						<a href="#">刺杀骑士团长 / </a>
					</li>
					<li>
						<a href="#">蒙台俊利育儿全书 / </a>
					</li>
					<li>
						<a href="#">阿加莎克里斯蒂</a>
					</li>
				</ul>
			</div>

			<div>
				<img src="imgs/other/tip.png" />
			</div>
		</div>

	</div>
	<!--搜索框	end-->
	<!--导航栏	start-->
	<div class="nav">
		<div class="content">
			<div class="dropdown">
				<div class="dt">图书分类</div>

			</div>
			<div class="navitems">
				<ul>
					<li>
						<a href="#" class="active">首页</a>
					</li>
					<li>
						<a href="#">淘书网</a>
					</li>
					<li>
						<a href="#">畅销榜</a>
					</li>
					<li>
						<a href="#">新上架</a>
					</li>
					<li>
						<a href="#">平台自营</a>
					</li>
					<li>
						<a href="#">出版社直销</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!--导航栏	end-->
	<!--主内容  start-->
	<div class="main content">
		<div class="left">
			<!--侧边栏导航-->
			<div class="sidebar">
				<ul class="menu">
					<!--定义一个模板-->
					<script type="text/html" id="sidebar-menu">
							<li>
								<h4>{{title}}<span class="iconfont icon-youjiantou1"></span></h4>
								<ol>
									{{each list as type}}
									<li>
										<a href="#">{{type.name}}</a>
									</li>
									{{/each}}
								</ol>
									<ul class="detail">
										{{each list as type}}
										<li>
											<h4>{{type.name}}</h4>
											<ol>
												{{each type.content as text}}
												
												<li><a href="">{{text}}</a></li>
												{{/each}}
											</ol>
										</li>
										{{/each}}
									</ul>
							</li>
						</script>
				</ul>
				<div class="all">
					<a href="#">全部商品分类......</a>
				</div>
			</div>
			<div class="star">
				<a href="#">2020网友推荐<br>五星好评</a>
			</div>
		</div>

		<div class="right">
			<!-- 轮播图  start-->
			<div class="slides">
				<div class="swiper-container">
					<!-- 滑块 -->
					<div class="swiper-wrapper">
						<!-- <div class="swiper-slide">
								<img src="imgs/slides/slides01.jpg" alt="">
							</div> -->
					</div>
					<!-- 分页器 -->
					<div class="swiper-pagination"></div>
					<!-- 导航器（左右箭头） -->
					<div class="swiper-button-prev btn"></div>
					<div class="swiper-button-next btn"></div>
				</div>
			</div>
			<!-- 轮播图  end-->
			<!-- 标签页  start-->
			<div class="tabs">
				<ul class="tabs-nav">
					<li class="active"><a href="#">猜你喜欢</a></li>
					<li><a href="#">本周精选</a></li>
					<li><a href="#">主编推荐</a></li>
				</ul>
				<div class="tabs-content">
					<div class="tab-panel">
						<div class="intro">
							<div class="left">
								<img src="./imgs/guessLikes/like01.jpg" alt="">
							</div>
							<div class="right">
								<p class="book-name">洞灵小志 续志 补志</p>
								<p class="book-price">
									<span>￥14.6</span>
									<del>￥48.6</del>
								</p>
								<p class="book-desc">
									这是一本讲述离我们不太久远的鬼怪故事的书，多为20世纪二三十年代民间以及士大
									夫之间流传的各类奇闻异事。谈鬼说狐居多，间及公案游侠、海内异闻，诸如赶尸、移腐、
									接火、查花等湘粤奇俗，均首见于此书。
								</p>

							</div>
						</div>
						<ul class="list">
							<li>
								<img src="./imgs/guessLikes/like02.jpg" alt="">
								<p>面对危机中的世界/克里希那穆提欧洲演讲集</p>
								<p class="book-price">
									<span>￥14.6</span>
									<del>￥48.6</del>
								</p>
							</li>
							<li>
								<img src="./imgs/guessLikes/like03.jpg" alt="">
								<p>面对危机中的世界/克里希那穆提欧洲演讲集</p>
								<p class="book-price">
									<span>￥14.6</span>
									<del>￥48.6</del>
								</p>
							</li>
							<li>
								<img src="./imgs/guessLikes/like04.jpg" alt="">
								<p>面对危机中的世界/克里希那穆提欧洲演讲集</p>
								<p class="book-price">
									<span>￥14.6</span>
									<del>￥48.6</del>
								</p>
							</li>
							<li>
								<img src="./imgs/guessLikes/like05.jpg" alt="">
								<p>面对危机中的世界/克里希那穆提欧洲演讲集</p>
								<p class="book-price">
									<span>￥14.6</span>
									<del>￥48.6</del>
								</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 标签页  end-->
			<!-- 图书畅销榜 -->
			<div class="bestSelling">
				<h4>图书畅销榜<a href="#" class="more">更多>></a></h4>
				<ol class="list">
					<!-- <li><a href="#">01.哀悼人<span class="iconfont icon-youjiantou1"></span></a></li> -->

				</ol>
			</div>
		</div>

	</div>
	<!--主内容	end-->

</body>

<script src="js/index.js"></script>

</html>